<section class="content-header">
  <h1>
    {{title}}
  </h1>
</section>

<!-- Main content -->
<section class="content">
  <div class="row">
    <div class="col-md-3 col-md-push-9">
      <div class="box box-default">
        <div class="box-header with-border">
          <h3 class="box-title">查询区域</h3>
          <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse">
              <i class="fa fa-minus"></i>
            </button>
          </div>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
          <div class="form-group">
            <label for="DateTimeRange">时间</label>
            <input type="text" class="form-control pull-right" id="DateTimeRange" placeholder="请选择日期" />
          </div>
          <div class="form-group">
            <label>区域</label>
            <dx-select-box #subArea style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="subAreaItems" displayExpr="subArea"
              [(selectedItem)]="subAreaSelected" [value]="null" [searchEnabled]="true" (onValueChanged)="onSubAreaSelectedChange($event)">
            </dx-select-box>
            <!-- <dx-drop-down-box #ddda style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [(value)]="subAreaSelected"
              displayExpr="subArea" placeholder="请选择区域" [showClearButton]="true" (onValueChanged)="onSubAreaSelectedChange($event)"
              [dataSource]="subAreaItems">
              <dxo-drop-down-options [height]="310"></dxo-drop-down-options>
              <div *dxTemplate="let data of 'content'">
                <button type="button" (click)="clearSubAreaSelected()" class="btn btn-default btn-sm" title="重置">重置</button>&nbsp;&nbsp;&nbsp;
                <button type="button" (click)="subAreaSelectedOk()" class="btn btn-info btn-sm" title="确定">确定</button>
                <dx-data-grid [dataSource]="subAreaItems" [hoverStateEnabled]="true" [paging]="{ enabled: true, pageSize: 1000 }" [filterRow]="{ visible: true }"
                  [(selectedRowKeys)]="subAreaSelected" [scrolling]="{ mode: 'infinite' }" [height]="265" [showColumnLines]="true"
                  [showRowLines]="true" [showBorders]="true" [rowAlternationEnabled]="true">
                  <dxo-selection [selectAllMode]="allPages" [showCheckBoxesMode]="always" mode="multiple"></dxo-selection>
                  <dxi-column dataField="subArea" caption="区域">
                  </dxi-column>
                </dx-data-grid>
              </div>
            </dx-drop-down-box> -->
          </div>
          <div class="form-group">
            <label>工位</label>
            <input type="text" [(ngModel)]="queryStationCode" disabled="disabled">
            <!-- <dx-drop-down-box #dddb style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [(value)]="equipmentSelected"
              displayExpr="stationCode" placeholder="请选择工位" [showClearButton]="true" [dataSource]="equipemntItems">
              <dxo-drop-down-options [height]="310"></dxo-drop-down-options>
              <div *dxTemplate="let data of 'content'">
                <button type="button" (click)="clearEquipmentSelected()" class="btn btn-default btn-sm" title="重置">重置</button>&nbsp;&nbsp;&nbsp;
                <button type="button" (click)="equipmentSelectedOk()" class="btn btn-info btn-sm" title="确定">确定</button>
                <dx-data-grid #ddg [dataSource]="equipemntItems" [hoverStateEnabled]="true" [paging]="{ enabled: true, pageSize: 1000 }"
                  [filterRow]="{ visible: true }" [(selectedRowKeys)]="equipmentSelected" [scrolling]="{ mode: 'infinite' }"
                  [height]="265" [showColumnLines]="true" [showRowLines]="true" [showBorders]="true" [rowAlternationEnabled]="true">
                  <dxo-selection [selectAllMode]="allPages" [showCheckBoxesMode]="always" mode="multiple"></dxo-selection>
                  <dxi-column dataField="stationCode" caption="工位" [width]="100">
                  </dxi-column>
                  <dxi-column dataField="subArea" caption="区域" [width]="100">
                  </dxi-column>
                </dx-data-grid>
              </div>
            </dx-drop-down-box> -->
          </div>
          <!-- <div class="form-group">
            <label>模版</label>
            <dx-select-box style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="templateItems" displayExpr="templateName"
              [(selectedItem)]="templateSel" [value]="templateItems[0]" [searchEnabled]="true">
            </dx-select-box>
          </div> -->
          <div class="form-group">
            <label>班次</label>
            <dx-select-box #shift style="width:100%;height:35px;margin-bottom:10px;border-radius: 0px" [items]="shiftItems" displayExpr="shiftName"
              [(selectedItem)]="shiftSelected" [value]="shiftItems[0]" [searchEnabled]="true">
            </dx-select-box>
          </div>
          <div class="form-group">
            <label>开班首小时</label>
            <input type="checkbox" [(ngModel)]="startHour">
          </div>
          <div class="form-group">
            <label>用餐/休息影响</label>
            <input type="checkbox" [(ngModel)]="eat">
          </div>
          <div class="form-group">
            <label>末小时影响</label>
            <input type="checkbox" [(ngModel)]="endHour">
          </div>
          <div class="form-group">
            <label>换型</label>
            <input type="checkbox" [(ngModel)]="change">
          </div>
        </div>
        <div class="box-footer">
          <button type="button" class="btn btn-primary" (click)="getReportData()"> 查 询 </button>
        </div>
      </div>
    </div>

    <div class="col-md-9 col-md-pull-3">
      <!-- *ngFor="let i of list" -->
      <div class="box box-default">
        <div class="box-header with-border">
          <h3 class="box-title">{{title}}查询</h3>
          <p class="box-title moee">区域: {{subAreaSelected.subArea}}</p>
          <p class="box-title moee">JPH: {{jph}}</p>
          <p class="box-title moee">平均oee: {{moee}}%</p>
          <div class="box-tools pull-right">
            <button type="button" class="btn btn-box-tool" data-widget="collapse">
              <i class="fa fa-minus"></i>
            </button>
          </div>
        </div>
        <!-- /.box-header -->
        <div class="box-body">
          <dx-data-grid [dataSource]="moeeList" [showColumnLines]="true" [showRowLines]="true" [showBorders]="true" 
          [rowAlternationEnabled]="true" (onExporting)="onExporting($event)" [columnMinWidth]="50" [columnAutoWidth]="true">
            <dxo-paging [pageSize]="20"></dxo-paging>
            <dxo-export [enabled]="true" fileName="月度设备有效利用率查询" [allowExportSelectedData]="false"></dxo-export>
            <dxo-pager [showPageSizeSelector]="true" [allowedPageSizes]="[10, 20, 100]" [showInfo]="true">
            </dxo-pager>
            <dxi-column dataField="prodDateVal0" caption="日期">
            </dxi-column>
            <dxi-column dataField="shiftVal0" caption="班次">
            </dxi-column>
            <dxi-column dataField="stationCode" caption="区域">
            </dxi-column>
            <dxi-column dataField="oee1" caption="1H">
            </dxi-column>
            <dxi-column dataField="oee2" caption="2H">
            </dxi-column>
            <dxi-column dataField="oee3" caption="3H">
            </dxi-column>
            <dxi-column dataField="oee4" caption="4H">
            </dxi-column>
            <dxi-column dataField="oee5" caption="5H">
            </dxi-column>
            <dxi-column dataField="oee6" caption="6H">
            </dxi-column>
            <dxi-column dataField="oee7" caption="7H">
            </dxi-column>
            <dxi-column dataField="oee8" caption="8H">
            </dxi-column>
            <dxi-column dataField="oee9" caption="9H">
            </dxi-column>
            <dxi-column dataField="oee10" caption="10H">
            </dxi-column>
            <dxi-column dataField="oee11" caption="11H">
            </dxi-column>
            <dxi-column dataField="oee0" caption="total">
            </dxi-column>
          </dx-data-grid>
        </div>
      </div>
    </div>
  </div>
</section>